
import React, { Component } from 'react';

// 场景：定义了一个根组件 App1  ， 有1个 标签 登录，当点击登录标签的时候 应该要显示出登录组件内容
// 1.0 导入三个核心包
//  Router是BrowserRouter的别名，它用于包裹Route和Link两个组件
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom'

class App1 extends Component {
    state = {}
    render() {
        return (<div>
            App1 <br />
            {/* <Router> */}

            {/* 2.0 使用Link组件创建一个标签，用于给用户点击使用 */}
            <Link to="/login">登录</Link>
            <Link to="/home/100/age">首页</Link>
            {/* 3.0 定义路由规则，特点：Route组件写在哪儿，那么这个规则所注册的组件内容将来就渲染在哪儿 */}
            {/* 4.0 注册跟路径的默认的路由规则 */}
            {/* 只要在Route 组件中增加了exact 关键字，则表示该条路由规则是一个精确匹配模式 */}
            {/* <Route path="/" exact component={Home}></Route> */}
            {/* 场景：利用Redirect组件结合Route的render函数实现默认路由规则的重定向功能 */}
            <Route path="/" exact render={() => <Redirect to="/login"></Redirect>}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/home/:id/:name" component={Home}></Route>
            {/* </Router> */}
        </div>);
    }
}

export default App1;

class Login extends Component {
    state = {}
    render() {
        return (<div>
            登录
            <button onClick={() => {
                // 利用编程式导航方法跳转首页
                this.props.history.push("/home/" + Math.random() + '/login')
            }}>登录成功</button>
        </div>);
    }
}

function Home(props) {
    return (<div style={{ width: '200px', height: "100px", border: '1px solid red' }}>
        首页 <br />
        参数id={ props.match.params.id} <br />
        参数name={ props.match.params.name}
        <br />
        <button onClick={() => { props.history.go(-1); }}>回退1页</button>
    </div>)
}
